<template>
  <div class="article-container titlebar-page">
    <TitleBar title="文章详情">
      <div class="share-icon" slot="right">
        <share-variant-icon :size="24" style="color: white;"></share-variant-icon>
      </div>
    </TitleBar>
    <div class="title">
      <h1>{{title}}</h1>
    </div>
    <div class="source">
      <h2>来源：{{source}}</h2>
    </div>
    <div class="content" v-html="content" id="content"></div>
    <!-- <div class="actions">
      <div class="star">
        <star-outline-icon ></star-outline-icon>
        <span>收藏</span>
      </div>
      <div class="like">
        <thumb-up-outline-icon></thumb-up-outline-icon>
        <span>点赞</span>
      </div>
    </div> -->
  </div>
</template>

<script>
import localArticle from './article.json';
import TitleBar from '../../components/TitleBar'
export default {
  data() {
    return {
        title: "",
        source: "",
        content: ""
    };
  },
  mounted() {
    let query = this.$route.query;
    let article = this.$route.params;
    if(query.article) {
      article = localArticle[query.article];
    }
		this.title = article.title;
    this.source = article.source;
    this.content = article.content.replace(/\&quot;/g, '\"').replace(/<\/br>{4}/g, '<br/><br/>');
    this.$nextTick(() => {
    let contentDom = document.querySelectorAll('#content img')
    let domArr = []
    for(let i = 0; i < contentDom.length; i++) {
      // domArr.push(contentDom.item(i));
      let item = contentDom.item(i)
      item.setAttribute(`src`, `${article.pictureUrl}/${item.getAttribute('src')}`);
      item.setAttribute('alt', `image${i}`);
    }
    })
    
  },
  components: {
    TitleBar
  }
};
</script>

<!-- v-html 中的内容不含在scope中  不能加scoped-->
<style lang="less">
.article-container {
  width: 100%;
  height: 100%;
  // overflow-y: scroll;
  .title {
    h1 {
      padding: 4px 0.9rem;
      font-size: 1rem;
      font-weight: normal;
    }
  }
  .source {
    h2 {
      padding: 4px 0.9rem;
			font-size: 0.9rem;
			color: #666;
      font-weight: normal;
    }
  }
  .content {
		padding-top: 12px;
    font-size: 0.92rem;
    .article-image {
      width: 90%;
    }
  }
  .actions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 6rem;
    margin-top: 1rem;
    .star, .like {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px solid #777;
      border-radius: 1rem;
      height: 100%;
      margin: 1rem;
      flex-direction: column;
      svg {
        flex: 1;
        width: 2.6rem;
        height: 2.6rem;
      }
    }
    .star svg {
      color: #F44336;
    }
    .like svg {
      color: rgb(36, 164, 214);
    }

  }
}
</style>
